4장 이벤트 핸들링

리액트의 이벤트 시스템

HTML 이벤트와 비슷함

const Say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("안녕하세요!");
  const onClickLeave = () => setMessage("안녕히 가세요!");

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}> 퇴장</button>
    </div>
  );
};

export default Say;

이벤트 사용시 주의 사항

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 JS 코드를 전달하는 게 아니라, 함수 형태로 값을 전달
3. DOM 요소에만 이벤트 설정할 수 있음.
   컴포넌트에 이벤트 설정 못함.

이벤트 핸들링 익히기

class EventPractice extends Component {
  state = {
    message: "",
  };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력하셈"
          value={this.state.message}
          onChange={(e) => {
            this.setState({ message: e.target.value });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: "" });
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

함수 형태로 값을 전달하기떄문에 함수를 미리 만들어서 전달할 수도 있음

• 코드

  class EventPractice extends Component {
    state = {
      message: "",
    };
  
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleChange(e) {
      this.setState({
        message: e.target.value,
      });
    }
  
    handleClick() {
  		alert(this.state.message);
      this.setState({
        message: "",
      });
    }
  
    render() {
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력하셈"
            value={this.state.message}
            onChange={this.handleChange}
          />
          <button onClick={this.handleClick}>확인</button>
        </div>
      );
    }
  }
  

constructor 에서 바인딩 처리 안해주고 메서드를 화살표 함수로 처리해도 됨.
바벨의 transform-class-properties 라 뭐라나

	handleChange = (e) => {
    this.setState({
      message: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({
      message: "",
    });
  };

input 여러개 다루기

❓ if input이 여러개면 어떻게 하면 좋을까?
⇒ setState에 수정된 프로퍼티 전달할 때, key 값을 동적으로 전달하면 된다.

handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

함수 컴포넌트로 구현하기

• 클래스형 컴포넌트로 구현

  import React, { Component } from "react";
  
  class EventPractice extends Component {
    state = {
      username: "",
      message: "",
    };
  
    handleChange = (e) => {
      this.setState({
        [e.target.name]: e.target.value,
      });
    };
  
    handleClick = () => {
      alert(this.state.username + " : " + this.state.message);
      this.setState({
        username: "",
        message: "",
      });
    };
    handleKeyPress = (e) => {
      if (e.key == "Enter") this.handleClick();
    };
  
    render() {
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="username"
            placeholder="이름"
            value={this.state.username}
            onChange={this.handleChange}
          />
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력하셈"
            value={this.state.message}
            onChange={this.handleChange}
            onKeyPress={this.handleKeyPress}
          />
          <button onClick={this.handleClick}>확인</button>
        </div>
      );
    }
  }
  
  export default EventPractice;
  

import React, { useState } from "react";

const EventPractice = () => {
  const [username, setUsername] = useState("");
  const [message, setMessage] = useState("");
  const onChangeUsername = (e) => setUsername(e.target.value);
  const onChangeMessage = (e) => setMessage(e.target.value);

  const onClick = () => {
    alert(username + " : " + message);
    setUsername("");
    setMessage("");
  };

  const onKeyPress = (e) => {
    if (e.key == "Enter") onClick();
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="이름"
        value={username}
        onChange={onChangeUsername}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력하셈"
        value={message}
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

export default EventPractice;

🔥 message 랑 username 따로따로 state 설정하니까 함수도 따로 구현해야한다
⇒ 두개를 하나로 묶어서 객체로 state 설정하면 된다.

const EventPractice = () => {
  const [form, setForm] = useState({
    message: "",
    username: "",
  });
  const { message, username } = form;

  const onChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };